<template>
  <el-form label-width="120px" class="whole-form" label-position="top">
    <el-form-item label="文献编号">
      <el-input v-model="doc.doi" placeholder="请输入文章编号" @input="checkDoi"/>
    </el-form-item>
    <el-form-item label="文献标题">
      <el-input v-model="content.title" placeholder="请输入标题"/>
    </el-form-item>
    <el-form-item label="文献关键词">
      <el-input v-model="kws" placeholder="请输入关键词，多个关键词用 ; 分割" @input="checkKeywordsInput"/>
    </el-form-item>
    <el-form-item label="第一作者">
      <div v-if="doc?.firstAuthor" class="author-desc">{{ authorDesc(doc.firstAuthor) }}</div>
      <div class="unselect-author" v-else>未选择第一作者</div>
      <add-one-author-component v-model="doc.firstAuthor" style="display: inline-block;margin-left: 10px"/> <!--增加作者按钮-->
      <el-button style="margin-left: 10px" v-if="doc.firstAuthor" @click="showAuthor(doc.firstAuthor)">详情</el-button>
      <el-button style="margin-left: 10px" v-if="doc.firstAuthor" type="danger" @click="delAuthor(true)">删除</el-button>
    </el-form-item>
    <el-form-item label="通讯作者">
      <div v-if="doc?.correspondingAuthor" class="author-desc">{{ authorDesc(doc.correspondingAuthor) }}</div>
      <div class="unselect-author" v-else>未选择通讯作者</div>
      <add-one-author-component v-model="doc.correspondingAuthor" style="display: inline-block;margin-left: 10px"/> <!--增加作者按钮-->
      <el-button style="margin-left: 10px" v-if="doc.correspondingAuthor" @click="showAuthor(doc.correspondingAuthor)">详情</el-button>
      <el-button style="margin-left: 10px" v-if="doc.correspondingAuthor" type="danger" @click="delAuthor(false)">删除</el-button>
    </el-form-item>
    <el-form-item label="文献摘要">
      <el-input v-model="content.ab" type="textarea" placeholder="请输入摘要" rows="6"/>
    </el-form-item>
    <el-form-item label="文献类别">
      <el-input v-model="doc.category" placeholder="请输入文献类别"/>
    </el-form-item>
    <el-form-item label="学科分类">
      <el-input v-model="doc.disciplineClassification" placeholder="请输入学科分类"/>
    </el-form-item>
    <el-form-item label="语言">
      <el-input v-model="doc.language" placeholder="请输入语言"/>
    </el-form-item>
    <el-form-item label="出版物标题">
      <el-input v-model="publication.title" placeholder="请输入出版物标题"/>
    </el-form-item>
    <el-form-item label="出版物ISBN">
      <el-input v-model="publication.isbn" placeholder="请输入出版物ISBN" @input="checkIsbn"/>
    </el-form-item>
    <el-form-item label="出版物ISBN">
      <el-input v-model="publication.issn" placeholder="请输入出版物ISSN" @input="checkIssn"/>
    </el-form-item>
    <el-form-item label="出版物类别">
      <el-input v-model="publication.category" placeholder="请输入出版物分类"/>
    </el-form-item>
    <el-form-item label="出版物期号">
      <el-input v-model="publication.issue" placeholder="请输入出版物期号"/>
    </el-form-item>
    <el-form-item label="出版物卷号">
      <el-input v-model="publication.volume" placeholder="请输入出版物卷号"/>
    </el-form-item>
    <el-form-item label="出版时间">
      <el-date-picker v-model="publication.date" type="date" placeholder="请选择出版日期" style="width: 100%"/>
    </el-form-item>
    <author-list-component v-model="authors" :has="'true'"/> <!--作者列表-->
    <quotation-list-component v-model="quotations"/> <!--引文列表-->
    <fund-list-component v-model="funds"/> <!--基金列表-->
    <br><br>
    <el-button style="float: right" type="primary" size="large" @click="onSubmit">确认添加</el-button>
    <br><br>
  </el-form>
</template>

<script setup>
import {provide, ref} from 'vue'
import {ElMessage} from "element-plus";
import {addDocumentApi} from '@/apis/document.js'
import AuthorListComponent from "@/components/add/document/author/AuthorListComponent.vue";
import FundListComponent from "@/components/add/document/fund/FundListComponent.vue";
import QuotationListComponent from "@/components/add/document/quotation/QuotationListComponent.vue";
import AddOneAuthorComponent from "@/components/add/document/author/AddOneAuthorComponent.vue";

// 告诉子节点，当前页码是新增页码而不是编辑页面
provide('doc', {value: {}})
const doc = ref({})
const kws = ref('')
const content = ref({})
const authors = ref([])
const publication = ref({})
const quotations = ref([])
const funds = ref([])

const init = () => {
  doc.value = {doi: ''}
  kws.value = ''
  content.value = {}
  authors.value = []
  publication.value = {}
  quotations.value = []
  funds.value = []
}

const authorDesc = (author) => author.firstName + '【' + author.lastName + '】,【' + author.email + '】';

// 展示一个作者的详细信息
const authorDetail = ref({})
const authorShowDialog = ref(false)
provide('showAuthor', authorDetail)
provide('authorShowDialog', authorShowDialog)
const showAuthorDesc = () => {
  authorShowDialog.value = true
}
const showAuthor = (author) => {
  authorDetail.value = author
  showAuthorDesc()
}


// 删除一个作者
const delAuthor = (flag) => {
  if (confirm('确定要删除' + (flag ? '第一作者' : '通讯作者') + '吗?')) {
    if (flag) doc.value.firstAuthor = undefined
    else doc.value.correspondingAuthor = undefined
  }
}

// 限制关键词的输入格式
const checkKeywordsInput = () => {
  if (kws.value) {
    kws.value = kws.value.replace('；', ';')
    kws.value = kws.value.replace(/[^\u4e00-\u9fa5；;a-zA-Z0-9]/g, ''); // 移除非中文字符和中英文分号
    kws.value = kws.value.replace(';;', ';')
    if (kws.value[0] === ';') {
      kws.value = kws.value.substring(1);
    }
  }
}

const checkDoi = () => {
  const str = doc.value.doi
  doc.value.doi = str.replace(' ', '')
}

const checkIsbn = () => {
  const str = publication.value.isbn
  publication.value.isbn = str.replace(' ', '')
}

const checkIssn = () => {
  const str = publication.value.issn
  publication.value.issn = str.replace(' ', '')
}
const onSubmit = () => {
  if (!kws.value) kws.value = ''
  let ckws = kws.value.trim().split(';')
  const len = ckws.length;
  if (len <= 0 || len === 1 && !ckws[len - 1]) {
    ElMessage.error('未填写关键词')
    return
  }
  if (!ckws[len - 1]) ckws = ckws.slice(0, -1)
  for (let i = 0; i < ckws.length; i++) ckws[i] = ckws[i].trim()
  content.value.keywords = []
  new Set(ckws).forEach(kw => content.value.keywords.push({name: kw}))
  doc.value.content = content.value
  doc.value.publication = publication.value
  doc.value.authors = authors.value
  doc.value.quotations = quotations.value
  doc.value.funds = funds.value
  console.log(doc.value)
  addDocumentApi(doc.value).then(resp => {
    if (resp.data.code === 200) {
      ElMessage.success("添加成功")
      init() // 清空表格
    } else {
      ElMessage.error(resp.data.msg)
    }
  })
}


</script>

<style scoped>
.whole-form {
  min-width: 600px;
  max-width: 700px;
  margin-left: 5%;
}

.author-desc {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unselect-author {
  color: red;
  font-style: italic;
  font-weight: bold;
  float: left;
}
</style>